<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作全网热播视频页面</title>
    <style>
        *{margin: 0; padding: 0;font-family: "微软雅黑";font-size: 14px;}
        ul,ol,li{list-style: none;}
        #play{margin: 0 auto; width:680px; overflow: hidden;}
        #play h1{line-height: 40px; font-size: 22px;}
        #play ul>li{
            float: left;
            width: 220px;
            height: 308px;
            overflow: hidden;
            position: relative;
        }
        #play ol li{height: 37px; padding: 0px 0px 0 10px; position: relative;}
        #play ul>li>span{display: block; position: absolute; left: 0; bottom: 0; font-size: 25px; color: #ffffff; font-weight: bold; padding: 5px 10px; z-index: 100;}
        #play ul>li>p{position: absolute; left: 50px; bottom: 10px; color: #ffffff;}
        #play ol{padding-top: 13px; padding-right: 5px;}
        #play ol li span{display:inline-block; color: #ffffff; margin-right: 5px; width: 20px; height: 20px; font-size: 12px; font-weight: bold; text-align: center;}
        #play ol li p{position: absolute; right: 0; top: 3px; color: #ffffff; background: #f0a30f; padding: 0 8px; font-size: 12px; display: none;}
        #play ol li p+img{position: absolute; right: 0; top: 3px; padding: 0 8px; font-size: 12px; /* display: none; */}
        
    </style>
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<section id="play">
    <h1>全网热播视频</h1>
    <ul>
        <li><img src="images/flv01.jpg"><p>昊花梦</p><span>1</span></li>
        <li><img src="images/flv02.jpg"><p>好先生</p><span>2</span></li>
        <li>
            <ol>
                <li><span>3</span>三八线<p>加入看单</p></li>
                <li><span>4</span>吉详天宝<p>加入看单</p></li>
                <li><span>5</span>亲爱的翻译官<p>加入看单</p></li>
                <li><span>6</span>仙剑云之凡<p>加入看单</p></li>
                <li><span>7</span>权力的游戏第五季<p>加入看单</p></li>
                <li><span>8</span>琅琊榜<p>加入看单</p></li>    
                <li><span>9</span>那年青春我们正好<p>加入看单</p></li>
                <li><span>10</span>乡村受情8（上）<p>加入看单</p></li>  
            </ol>
        </li>
    </ul>
</section>
<script>
// 边距为10像素
    $('ul>li:not(:nth-of-type(3))').css('margin-right','10px');
// 背景设为#f0f0f0
   $('ul>li:last').css("background-color",'#f0f0f0');
// 


</script>
</body>
</html>